<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>属性绑定</title>
  </head>
  <body>
    <div id="app">
      <!-- 双大括号只适用于文本 -->
      <!-- 如果是属性的，需要使用v-bind指令 -->
      <p v-bind:title="msg">hello vue!</p>
      <img v-bind:src="url" alt="" />

      <!-- v-bind里面也可以使用变量或者js表达式 -->
      <p v-bind:title="msg + 'abc'">hello vue!</p>

      <!-- <input type="text" v-bind:disabled="disabled" /> -->
      <!-- 默认的属性值都是字符串，可以通过添加v-bind，将里面的内容转成js表达式 -->
      <input type="text" v-bind:disabled="false" />
      <div v-bind:num="1" v-bind:arr="[1,2,3]"></div>

      <!-- v-bind可以直接缩写成: -->
      <img :src="url" alt="" />
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            msg: "123",
            url: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            disabled: true,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
